<template>
    <div class="information">
        <span><svg t="1718943633780" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8539" width="40" height="40"><path d="M960.284444 200.248889v623.502222H63.715556V200.248889h896.568888M1012.622222 147.911111H11.377778v728.177778h1001.244444V147.911111z" fill="#37ADDB" p-id="8540"></path><path d="M564.679111 615.879111h237.112889v52.337778H564.679111zM564.679111 485.831111h316.188445v52.337778H564.679111zM564.679111 355.783111h316.188445v52.337778H564.679111zM343.722667 374.442667a59.505778 59.505778 0 1 1-60.984889 59.505777 60.302222 60.302222 0 0 1 60.984889-59.505777m0-52.337778a111.843556 111.843556 0 1 0 113.208889 111.843555 112.64 112.64 0 0 0-113.208889-111.843555z" fill="#37ADDB" p-id="8541"></path><path d="M527.928889 701.895111h-52.337778a131.982222 131.982222 0 0 0-263.850667 0H159.288889a184.32 184.32 0 0 1 368.526222 0z" fill="#37ADDB" p-id="8542"></path></svg></span>
        <div class="userCenter_title">{{ $t('user_info') }}</div>
        <div class="information_main">
            <div class="user-nick-name">
                <div class="el-form-item " style="margin-top: 10px;">
                    <label class="el-form-item__label">{{ $t('avatar') }}：</label>
                    <div  @click="showCropper = true" class="head">
                        <div class="hover_head">{{ $t('edit_avatar') }}</div>
                        <img v-if="user_info.user_avatar" ref="head_img" width="110" height="110" :src="userInfo.avatar" alt="">
                        <img v-if="!user_info.user_avatar" ref="head_img" width="110" height="110" :src="userInfo.avatar || 'https://www.yyfuns.com/static/user_avatar.png'" alt="">
                        <div v-if="avatar_masker" class="avatar_masker">{{masker_title}}</div> 
                    </div>
                    <ModifyAvatar :showCropper="showCropper" :changeImg="changeImg"/>
                </div>
                <div class="el-form-item ">
                    <label class="el-form-item__label">{{ $t('Nickname') }}：</label>
                    <div class="el-form-item__content">
                        <div class="el-input">
                            <input v-model="userInfo.nickname" type="text" autocomplete="off" :placeholder="$t('nickname_tip')" maxlength="16" class="el-input__inner">
                        </div> 
                        <br>
                    </div>
                </div>
                <div class="el-form-item user-nick-rel-name">
                    <label class="el-form-item__label">{{ $t('My_account') }}：</label>
                    <div class="el-form-item__content">
                        <span class="userinfo-descript">{{ userInfo.username }}</span>
                    </div>
                </div>
                <div class="el-form-item user-nick-rel-name">
                    <label class="el-form-item__label">{{ $t('set_pwd') }}：</label>
                    <div class="el-form-item__content">
                        <svg @click="openSetPwd" t="1735901739470" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4858" width="30" height="30"><path d="M805.888 1024H217.6c-74.24 0-134.656-60.928-134.656-135.68V492.544c0-74.752 60.416-135.68 134.656-135.68h588.288c74.24 0 134.656 60.928 134.656 135.68v395.776c0 74.752-60.416 135.68-134.656 135.68zM217.6 452.608c-21.504 0-39.424 17.92-39.424 40.448v395.776c0 22.016 17.408 40.448 39.424 40.448h588.288c21.504 0 39.424-18.432 39.424-40.448V493.056c0-22.016-17.92-40.448-39.424-40.448H217.6z m0 0" p-id="4859"></path><path d="M512 0C380.416 0 273.92 107.008 273.92 238.08v166.912c0 26.112 21.504 47.616 47.616 47.616h380.928c26.112 0 47.616-21.504 47.616-47.616V238.08C750.08 107.008 643.584 0 512 0z m142.848 357.376H369.152V238.08c0-78.848 64-142.848 142.848-142.848 78.848 0 142.848 64 142.848 142.848v119.296zM513.024 831.488c-26.112 0-47.616-21.504-47.616-47.616v-190.464c0-26.112 21.504-47.616 47.616-47.616 26.112 0 47.616 21.504 47.616 47.616v190.464c0 26.624-21.504 47.616-47.616 47.616z" p-id="4860"></path></svg>
                    </div>
                </div>
                <div class="el-form-item user-nick-rel-name">
                    <label class="el-form-item__label">{{ $t('Security_code') }}：</label>
                    <div class="el-form-item__content">
                        <p v-show="safety_code !== 2">{{safety_code}}</p>
                        <p @click="visible_setPwd = true" v-show="safety_code == 2" class="pwd_null_tip">{{ $t('set_code_tip') }}</p>
				        <svg  @click="lookPwd" v-show="!safety_code" t="1721984085896" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3614" width="30" height="30"><path d="M515.069851 833.362246c-179.279304 0-346.58619-96.495653-436.430499-251.932447-9.721195-16.884181-3.990806-38.475467 12.893375-48.196662s38.475467-3.990806 48.196662 12.893374c77.360248 133.640851 221.131608 216.62916 375.340462 216.62916 154.208854 0 298.082542-82.988308 375.340462-216.62916 9.721195-16.884181 31.312481-22.61457 48.196662-12.893374 16.884181 9.721195 22.61457 31.312481 12.893375 48.196662-89.844309 155.436794-257.151194 251.932447-436.430499 251.932447zM921.006495 486.264415c-12.177076 0-24.047167-6.344359-30.596182-17.60048C813.050065 335.023084 669.278705 252.034776 515.069851 252.034776c-154.208854 0-297.980214 82.988308-375.340462 216.629159-9.721195 16.884181-31.312481 22.61457-48.196662 12.893375-16.884181-9.721195-22.61457-31.312481-12.893375-48.196662C168.483661 277.923853 335.790547 181.4282 515.069851 181.4282s346.58619 96.495653 436.430499 251.932448c9.721195 16.884181 3.990806 38.475467-12.893375 48.196662-5.525732 3.172179-11.665434 4.707105-17.60048 4.707105z" fill="#272636" p-id="3615"></path><path d="M515.069851 700.437694c-105.295893 0-190.84241-85.648846-190.84241-190.842411s85.648846-190.84241 190.84241-190.84241 190.84241 85.648846 190.84241 190.84241-85.546517 190.84241-190.84241 190.842411z m0-311.180574c-66.308784 0-120.338163 53.927051-120.338163 120.338163s53.927051 120.338163 120.338163 120.338164S635.408014 575.904067 635.408014 509.595283s-54.029379-120.338163-120.338163-120.338163z" fill="#272636" p-id="3616"></path></svg>
			
                    </div>
                </div>
                <div class="el-form-item user-nick-rel-name" style="height: 100px;">
                    <label class="el-form-item__label">{{ $t('Personalized_Signature') }}：</label>
                    <div class="el-textarea">
                        <textarea v-model="userInfo.user_sign" autocomplete="off" :placeholder="`${$t('Set_signature')} - ( ゜- ゜)つロ`" rows="2" class="el-textarea__inner" style="min-height: 33px;"></textarea>
                    </div>
                </div>

                <!-- <div class="el-form-item" style="margin-top: 20px;">
                    <label class="el-form-item__label">性別：</label>
                    <div role="radiogroup" class="el-radio-group">
                        <label role="radio" tabindex="-1" class="el-radio-button">
                            <input type="radio" tabindex="-1" autocomplete="off" class="el-radio-button__orig-radio" value="男">
                            <span :class="{active:user_info.sex}" class="el-radio-button__inner">男</span>
                        </label> 
                        <label role="radio" tabindex="-1" class="el-radio-button">
                            <input type="radio" tabindex="-1" autocomplete="off" class="el-radio-button__orig-radio" value="女">
                            <span :class="{active:!user_info.sex}" class="el-radio-button__inner">女</span>
                        </label> 
                        <label role="radio" aria-checked="true" tabindex="0" class="el-radio-button is-active">
                            <input type="radio" tabindex="-1" autocomplete="off" class="el-radio-button__orig-radio" value="保密">
                            <span :class="{active:user_info.sex == 2}" class="el-radio-button__inner">保密</span>
                        </label>
                    </div>
                </div> -->
                
                <!-- <div class="el-form-item" style="margin-top: 30px;">
                    <label class="el-form-item__label">出生日期：</label>
                    <div class="custom-datepicker">
                        <input type="date" :value="user_info.birthday">
                    </div>
                </div>     -->
            </div>

            <div class="user-my-btn-warp">
                <button @click="saveEdit" type="button" class="el-button el-button--primary">
                    <span>{{ $t('save') }}</span>
                </button>
            </div>
            
        </div>

        <div v-if="visible" class="modal-overlay">
            <div class="modal">
                <div class="close" @click="handleClose"></div>
                <div class="modal-header">
                    <h3>{{ $t('Verify_pwd') }}</h3>
                </div>
                <div class="modal-body">
                    <!-- <label for="password">支付密码</label> -->
                    <input type="password" v-model="password" id="password" :placeholder="$t('input_pwd')">
                </div>
                <div class="modal-footer">
                    <p @click="handleClose">{{ $t('cancellation') }}</p>
                    <p @click="handleSubmit">{{ $t('confirm') }}</p>
                </div>
            </div>
        </div>

        <div v-if="visible_setPwd" class="modal-setPwd">
            <div class="modal">
                <div class="close" @click="handleClose_pwd"></div>
                <div class="modal-header">
                    <h3>{{$t('set_code')}}</h3>
                    <p>{{$t('re_tip')}}</p>
                </div>
                <div class="modal-body">
                    <!-- <label for="password">支付密码</label> -->
                    <input
                    type="password"
                    v-model="set_password"
                    id="password"
                    :placeholder="$t('enter_code')"
                    maxlength="6"
                    pattern="\d*"
                    />
                </div>
                <div class="modal-footer">
                    <p @click="handleClose_pwd">{{$t('cancellation')}}</p>
                    <p @click="handleSubmit_setPWd">{{$t('confirm')}}</p>
                </div>
            </div>
        </div>
    </div>

    <BindAccount :visible="visible_bind" :handleClose='handleClose_bind' :getUserInfo="getUserInfo"/>

    <div v-if="isPwd" class="modal-setPwd">
        <div class="modal">
            <div class="close" @click="closeSetPwd"></div>
            <div class="modal-header">
                <h3>{{$t('set_pwd')}}</h3>
            </div>
            <el-input v-model="user_oldpassword" type="password" style="height: 40px;" :placeholder="$t('old_pwd')"></el-input>
            <el-input v-model="user_newpassword" type="password" style="margin-top: 10px;height: 40px;" :placeholder="$t('new_pwd')"></el-input>
            <el-button style="margin-top: 20px;" type="primary" size="large" @click="save_pwd">确定</el-button>
        </div>
    </div>
</template>

<script setup>
import ModifyAvatar from "@/components/ModifyAvatar/index.vue" //上传修改图片组件
import { useUserInfoStore } from '@/store/modules/user_info/index';
import { ref,reactive,watchEffect } from 'vue';
import axios from '@/utils/api'
import BindAccount from "@/components/UserCenter/bindAccount/index.vue"
const head_img = ref();
let showCropper = ref(false);
const changeImg = async (src,type)=>{
    console.log(src,88888888888);
    if(type){
        head_img.value.src = src
        showCropper.value = false;
    }else{
        showCropper.value = false;
        return
    }

    const res = await axios.post('/upload/image',src,{
        headers:{'Content-type' : 'multipart/form-data'}
    })
    console.log(res);
    userInfo.user_avatar = window.baseUrl+res.data.media_url;
    userInfo.avatar = window.baseUrl+res.data.media_url;
    // console.log(userInfo.user_avatar);
    // head_img.value.src = window.baseUrl+res.data.media_url
    // console.log(head_img.value.src);
    // console.log(head_img.value.src = window.baseUrl+res.data.media_url);
    avatar_masker.value = 0
}


const user_infoStore = useUserInfoStore();
const user_info = reactive(user_infoStore.userInfo)
console.log(user_info);

const userInfo = reactive({
    avatar:user_info.user_avatar,
    nickname:user_info.nickname,
    user_sign:user_info.user_sign,
    username:user_info.username,
    user_id:user_info.id
})

const saveEdit = async () =>{
    if(userInfo.nickname.length < 2 || userInfo.nickname.length > 11){
        if(lang.value == 'en'){
            ElMessage.error('The nickname length is between 2 and 11 characters');
        }else{
            ElMessage.error('昵稱長度為2-11個字元');
        }
        return
    }
    const res = await axios.post('/saveUserInfo',userInfo)
    console.log(res);
    if(res.code == 200){
        if(lang.value == 'en'){
            ElMessage.success('Successfully saved');
        }else{
            ElMessage.success('保存成功');
        }
        
    }else{
        ElMessage.error('保存失败');
    }
    getUserInfo()
}

const avatar_masker = ref(0)
const masker_title = ref('')

const getUserInfo = async () =>{
    const data = {
        user_id:user_info.id,
    }
    const list = await axios.post('/getUserInfo',data)
    user_infoStore.setUserinfo(list.data.user_info)
    
    console.log(list.data.user_info.avatar_check,'userInfo');
    switch(list.data.user_info.avatar_check){
        case 1:
            if(lang.value == 'en'){
                masker_title.value = 'Under review'
            }else{
                masker_title.value = '審核中'
            }
            
            avatar_masker.value = 1
            break
        case 2:
            avatar_masker.value = 0
            break	
        case 3:
            if(lang.value == 'en'){
                masker_title.value = 'Rejected'
            }else{
                masker_title.value = '被駁回'
            }
            avatar_masker.value = 1
            break	
    }
}
getUserInfo()

const visible_bind = ref(false)
const handleClose_bind = () => {
    visible_bind.value = false
};

const visible = ref(false)
const password = ref('')
const safety_code = ref('')

if(!user_info.password){
    safety_code.value = 2
}
const lookPwd = ()=>{
    if(user_info.status == 0){
        if(lang.value == 'en'){
            ElMessage.warning('Please bind the official account first');
        }else{
            ElMessage.warning('請先綁定正式賬號');
        }
        
        visible_bind.value = true
        return
    }
    visible.value = true
}

const handleClose = () => {
    visible.value = false
    password.value = ''
};

const handleSubmit = () => {
    if (password.value) {
        getOrder()
    } else {
        if(lang.value == 'en'){
            ElMessage.error('Please fill in the login password');
        }else{
            ElMessage.error('请填写登錄密碼');
        }
        
    }
};

const getOrder = async () => {
    const info = {
        username:user_info.username,
        password:password.value,
        form_type:'login',
    }
    const data = await axios.post('/register_login',info)
    console.log(data);
    if (data.code == 0) {
        visible.value = false
       
        if(lang.value == 'en'){
            ElMessage.success('Verification successful');
        }else{
            ElMessage.success('驗證成功');
        }
        user_infoStore.setUserToken(data.data.token)
        user_infoStore.setUserToken_expire(data.data.expire)
        user_infoStore.setUserinfo(data.data.user_info)
        getPwd()
    }else {
        if(lang.value == 'en'){
            ElMessage.error('Verification failed');
        }else{
            ElMessage.error('驗證失敗');
        }
        
    }
}

const getPwd = async()=>{
    const userInfo = {
        user_id:user_info.id
    }
    const res = await axios.post('/getPassword',userInfo)
    console.log(res);
    if(res.code == 200){
        // ElMessage.success(res.message);
        if(res.data.password == ''){
            safety_code.value = 2
        }else{
            safety_code.value = res.data.password
        }
        password.value = ''
    }else{
        ElMessage.error(res.message);
    }
}

const set_password = ref("");
const visible_setPwd = ref(false);

const handleClose_pwd = () => {
  visible_setPwd.value = false;
  set_password.value = "";
};

const validatePassword = (password) => {
  var regex = /^\d{6}$/;
  return regex.test(password);
}

const handleSubmit_setPWd = () => {
  if (validatePassword(set_password.value)) {
    setPwd();
  } else {
    if(lang.value == 'en'){
      ElMessage.error("Please fill in the set security code");
    }else{
      ElMessage.error("請填寫6位安全碼");
    }
    
  }
};

const setPwd = async () => {
  const info = {
    user_id: user_info.id,
    wallet_password: set_password.value,
  };
  const data = await axios.post("/setWalletPassword", info);
  console.log(data);
  if (data.code == 200) {
    handleClose_pwd();
    safety_code.value = ''
    if(lang.value == 'en'){
      ElMessage.success('Password set successfully');
    }else{
      ElMessage.success('密碼設定成功');
    }
  } else {
    ElMessage.error(data.message);
  }
};

let lang = ref('')
if(localStorage.getItem('lang') == 'en'){
    lang.value = 'en'
}else{
    lang.value = 'zh'
}


watchEffect(() => {
    let value = set_password.value;
    let numericValue = value.replace(/\D/g, ''); // 移除非数字字符

    if (value !== numericValue) {
        set_password.value = numericValue; // 只更新如果有变化
    }
});


const isPwd = ref(false)
const user_oldpassword = ref('')
const user_newpassword = ref('')
const openSetPwd = ()=>{
    isPwd.value = true
}


const save_pwd = async ()=>{
    const regex_password = /^[A-Za-z0-9@.,_]{8,20}$/;
    console.log(user_newpassword.value)
    if(!regex_password.test(user_newpassword.value)){
        if(lang.value == 'en'){
            ElMessage.error('Inaccurate account format')
        }else{
            ElMessage.error('密碼格式不準確，請錄入8-20為密碼')
        }
        return
    }
    
    const info = {
        user_id: user_info.id,
        past_password: user_oldpassword.value,
        new_password: user_newpassword.value,
    };
    const data = await axios.post("/setPassword", info);
    console.log(data);
    if (data.code == 200) {
        isPwd.value = false
        user_oldpassword.value = ''
        user_newpassword.value = ''
        if(lang.value == 'en'){
        ElMessage.success('Password set successfully');
        }else{
        ElMessage.success('密碼設定成功');
        }
    } else {
        ElMessage.error(data.message);
    }
}

const closeSetPwd = ()=>{
    isPwd.value = false
    user_oldpassword.value = ''
    user_newpassword.value = ''
}
</script>

<style lang="less" scoped>
.information{
    .userCenter_title {
        font-size: 25px;
        color: #222;
        vertical-align: top;
        display: inline-block;
        margin-left: 10px;
        margin-top: 2px;
    }
    .information_main{
        .user-nick-name {
            width: 789px;
            .el-form-item__label {
                width: 135px;
                text-align: right;
                margin-right: 20px;
                float: left;
                line-height: 30px;
                padding: 0;
                font-size: 14px;
                color: #606266;
            }
            .el-form-item__content {
                line-height: 30px;
                position: relative;
                font-size: 14px;
                .pwd_null_tip{
                    text-decoration: underline;
                    cursor: pointer;
                    color: #00a1d6;
                    display: inline;
                }
                p{
					color: #9d9d9d;
				}
                .icon{
                    cursor: pointer;
                }
                .el-input,.el-input__inner {
                    float: left;
                    width: 225px;
                    height: 30px;
                    margin-right: 40px;
                    width: 200px !important;
                }
                .el-input__inner:focus {
                    border: 1px solid rgb(84, 168, 247); /* 设置选中状态的边框样式 */
                    outline: none; /* 可以去除默认的外边框样式 */
                }
                .el-input__inner {
                    line-height: 0 !important;
                }
                .el-input__inner {
                    -webkit-appearance: none;
                    background-color: #fff;
                    background-image: none;
                    border-radius: 4px;
                    border: 1px solid #dcdfe6;
                    box-sizing: border-box;
                    color: #606266;
                    display: inline-block;
                    height: 30px;
                    outline: 0;
                    padding: 0 15px;
                    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
                    width: 100%;
                }
                .nick-name-not {
                    color: #aaa;
                }
                .userinfo-descript {
                    font-size: 14px;
                    color: #898989;
                }
                
            }
            .el-form-item{
                margin-top: 20px;
                .el-radio-group {
                    display: inline-block;
                    line-height: 1;
                    vertical-align: middle;
                    font-size: 0;
                    .el-radio-button {
                        position: relative;
                        display: inline-block;
                        outline: 0;
                        margin-right: 20px;
                        .el-radio-button__orig-radio {
                            opacity: 0;
                            outline: 0;
                            position: absolute;
                            z-index: -1;
                        }
                        .el-radio-button__inner {
                            
                            padding: 5px 8px;
                            border: 1px solid #bfcbd9;
                            border-radius: 5px !important;
                            background: #f4f4f4;
                            color: #717171;
                            -webkit-appearance: none;
                            text-align: center;
                            box-sizing: border-box;
                            outline: 0;
                            margin: 0;
                            cursor: pointer;
                            font-size: 14px;
                            transition: all .3s cubic-bezier(.645,.045,.355,1);
                        }
                        .el-radio-button__inner:hover {
                            background-color: #22a1d6 !important;
                            border-color: #22a1d6 !important;
                            color: white;
                        }
                        .active {
                            background-color: #22a1d6 !important;
                            border-color: #22a1d6 !important;
                            color: white;
                        }
                        
                    }
                }
                .el-textarea {
                    float: left;
                    width: 618px;
                    height: 88px;
                    resize: none;
                    textarea{
                        width: 100%;
                        height: 100%;
                        padding: 5px 15px;
                        line-height: 1.5;
                        box-sizing: border-box;
                        color: #606266;
                        background-color: #fff;
                        background-image: none;
                        border: 1px solid #dcdfe6;
                        border-radius: 4px;
                        transition: border-color .2s cubic-bezier(.645,.045,.355,1);
                    }
                    textarea:focus {
                        border: 1px solid rgb(84, 168, 247); /* 设置选中状态的边框样式 */
                        outline: none; /* 可以去除默认的外边框样式 */
                    }
                }
                .custom-datepicker {
                    position: relative;
                    display: inline-block;
                }
                .custom-datepicker input[type="date"] {
                    padding: 10px;
                    border: 1px solid #ccc;
                    border-radius: 5px;
                    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
                    transition: border-color 0.3s ease-in-out;
                    outline: none;
                    width: 200px;
                }
                .custom-datepicker input[type="date"]:focus {
                    border-color: #3498db;
                }
                .head{
                    width: 110px;
                    height: 110px;
                    margin: initial;
                    margin-left: 155px;
                    position: relative;
                    cursor: pointer;
                    background-size: cover;
                    background-repeat: no-repeat;
                    .hover_head{
                        width: 100%;
                        height: 100%;
                        background-color: rgba(0, 0, 0, 0.4);
                        display: none;
                        text-align: center;
                        color: white;
                        align-items: center;
                        justify-content: center;
                        position: absolute;
                        top: 0;
                        left: 0;
                        z-index: 10;
                    }
                    img{
                        position: absolute;
                        top: 0;
                        left: 0;
                        z-index: 9;
                    }

                    .avatar_masker{
						width:100%;
						height: 100%;
						background-color: rgba(#000,.6);
						position: absolute;
						top: 0;
						left: 0;
						color: white;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 17px;
                        z-index: 9;
					}
                }
                .head:hover{
                    .avatar_masker{
                        display: none;
                    }
                    .hover_head{
                        display: flex;
                    }
                }
            }
        }
        .user-my-btn-warp{
            text-align: center;
            button{
                width: 110px;
                background: #00a1d6 !important;
                white-space: nowrap;
                cursor: pointer;
                -webkit-appearance: none;
                text-align: center;
                box-sizing: border-box;
                outline: 0;
                margin: 0;
                transition: .1s;
                font-weight: 500;
                padding: 12px 20px;
                font-size: 14px;
                border-radius: 4px;
                color: white;
                margin-top: 30px;
            }
            button:hover{
                background-color: rgba(#00a1d6, 0.8) !important ;
            }
        }
    }
}
.Avatar{
    width: 1000px;
    height: 800px;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 99;
}

/* 模态框样式 */
.modal-overlay,
.modal-setPwd {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-setPwd {
    z-index: 1001 !important;
}

.modal {
    background: linear-gradient(to bottom right, #f9f9f9, #ffffff);
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    width: 320px;
    text-align: center;
    position: relative;
}

.modal-header {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    flex-direction: column;
    p{
        font-size: 13px;
        margin-top: 5px;
        color: #7f7f7f;
    }
}

.modal-header h3 {
    margin: 0;
    font-size: 24px;
    color: #3c4043;
    font-family: 'Roboto', sans-serif;
}

.close-button1 {
    background: none;
    border: none;
    font-size: 28px;
    color: #9aa0a6;
    cursor: pointer;
    transition: color 0.3s ease;
    position: absolute;
    right: 20px;
    top: 5px;
}

.close-button1:hover {
    color: #1a73e8;
}

.modal-body {
    margin-bottom: 20px;
}

.modal-body label {
    display: block;
    font-size: 16px;
    color: #3c4043;
    margin-bottom: 5px;
    font-family: 'Roboto', sans-serif;
}

.modal-body input {
    width: 90%;
    padding: 10px;
    border: 1px solid #dadce0;
    border-radius: 8px;
    font-size: 16px;
    font-family: 'Roboto', sans-serif;
}

.modal-footer {
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
}

.modal-footer p {
    margin-left: 10px;
    padding: 10px 45px;
    font-size: 16px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Roboto', sans-serif;
    margin-right: 0;
    background-color: @primary-color;
    color: white;
}
.modal-footer p:hover {
    opacity: 0.8;
}
.modal-footer .cancel-button {
    background-color: #f5f5f5;
    color: #3c4043;
}

.modal-footer .cancel-button:hover {
    background-color: #ebebeb;
}

.modal-footer .confirm-button {
    background-color: #1a73e8;
    color: #fff;
}

.modal-footer .confirm-button:hover {
    background-color: #174ea6;
}
</style>